CSS中3种常见页面布局：双飞翼布局、粘连布局、左右两列布局

来源:网络整理作者: 发布时间:2020-12-16 17:15

本文就来为大家介绍3种常见的CSS页面布局：双飞翼布局、粘连布局、左右两列布局，希望对大家有一定的帮助。...

三、双飞翼布局

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=no,maximum-scale=1.0,minimum-scale=1.0"/> <title>粘连布局</title>  <style type="text/css"> *{ padding: 0; margin: 0; } html, body{ height: 100%; } .wrap{ /* 设置wrap的最小高度,当main元素中的内容较少或者为空时，也能保持100%高度 */ min-height: 100%; background: yellowgreen; text-align: center; } .main{ /*main的height值由内容决定*/ /*当内容不足一屏时，下面的设置不会撑开父元素wrap，此时wrap的min-height设置生效， * 当内容刚好一屏时，下面的设置开始撑开父容器，其height值为100%+50px。 * 拉开这50px的原因是防止footer遮盖住main内容，这个值不是固定死的，由footer的高度值决定 * 为footer向上填充margin-top: -50px;做准备 * */ padding-bottom: 50px; } .footer{ height: 50px; line-height: 50px; background: deeppink; text-align: center; margin-top: -50px; } </style> </head> <body> <div class="wrap"> <div class="main"> main<br />main<br />main<br />main<br /> main<br />main<br />main<br />main<br /> main<br />main<br />main<br />main<br /> main<br />main<br />main<br />main<br /> main<br />main<br />main<br />main<br /> main<br />main<br />main<br />main<br /> main<br />main<br />main<br />main<br /> main<br />main<br />main<br />main<br /> main<br />main<br />main<br />main<br /> main<br />main<br />main<br />main<br /> main<br />main<br />main<br />main<br /> mlzpain<br /> </div> </div>  <div class="footer"> footer </div> </body> </html>

外层容器con如果为固定宽度，right元素的overflow: hidden;是必须的，否则会出现rig中的字体不在rig里面。

本文就来为大家介绍3种常见的CSS页面布局：双飞翼布局、粘连布局、左右两列布局，希望对大家有一定的帮助。

CSS中3种常见页面布局：双飞翼布局、粘连布局、左右两列布局

2、必要说明

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>双飞翼三列布局</title> <style type="text/css"> /*清除浏览器默认样式*/ *{ padding: 0; margin: 0; } /*设置body的最小宽度*/ body{ min-width: 600px; } /*左浮动*/ .fl{ float: left; } /*双飞翼三列布局*/ .mid{ width: 100%; } .lef{ width: 200px; background: mediumpurple; margin-left: -100%; } .rig{ width: 200px; background: orangered; margin-left: -200px; } .inn_mid{ margin: 0 200px; background: pink; } /*等高布局*/ /* 先使子元素溢出父盒子范围，然后在父盒子中设置overflow:hidden; 清除溢出部分，从而由原来的不等高达到等高效果 */ .mid, .lef, .rig{ padding-bottom: 10000px; margin-bottom: -10000px; } .con{ border: 5px solid deepskyblue; overflow: hidden; } </style> </head> <body> <div class="con"> <div class="mid fl"> <div class="inn_mid"> <h4>middle</h4> <h4>middle</h4> <h4>middle</h4> </div> </div> <div class="lef fl">left</div> <div class="rig fl">right</div> </div> </body> </html>

效果如下：

二、粘连布局

1、代码如下

一、左右两列布局

1、代码如下：

外层容器con宽度如果是100%，或者默认，此时right元素的overflow: hidden;可有可无，页面不会因此受到影响。

更多编程相关知识，请访问：编程教学！！

以上就是CSS中3种常见页面布局：双飞翼布局、粘连布局、左右两列布局的详细内容，更多请关注聚合云库其它相关文章！

（推荐教程：CSS视频教程）

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>两列布局</title>  <style type="text/css"> *{ padding: 0; margin: 0; } body{ min-width: 600px; } .lef{ width: 100px; height: 400px; background: hotpink; float: left; } .rig{ height: 400px; background: yellowgreen; margin-left: 50px; /*给right开启BFC 利用BFC的特性： bfc的区域不会与浮动的box重叠*/ /* 溢出内容部分被切割,所以使用省略号表示 */ overflow: hidden; /*出现省略号需要四个设置： * display: block; * overflow: hidden; * white-space: nowrap; * text-overflow: ellipsis * */ /* white-space: nowrap; */ /* text-overflow: ellipsis; */ } .con{ width: 300px; margin: 0 auto; } </style> </head> <body> <div class="con"> <div class="lef">left</div> <div class="rig"> lzprightrightrightrightrightrightrightrightrightrightrightrightrightright <br /> rightrightrightrightrightrightrightrightrightrightrightrightrightright <br /> rightrightrightrightrightrightrightrightrightrightrightrightrightright <br /> rightrightrightrightrightrightrightrightrightrightrightrightrightright <br /> </div> </div> </body> </html>

效果如下：

用react的ReactCSSTransitionGroup插件	当你自己回头来看你写的这些
我们直接看代码： !DOCTYPE htm	那么使用 CSS3 新增的选择器无
微软IE9平台预览版完整支持H	IE9正式版无论从性能提升还是
CSS3东西最新资讯	各路人马对它的热情都极为高
中联重科CSS3混凝土喷射机器手	CSS3与页面机关进修总结（二）
四、id选择器（#ID） ID选择器	谈谈一些有趣的CSS题目（十）
在全局:root{ }伪类中定义了一个	CSS3与页面机关进修总结（七）
而不是元素本身	在使用有厂商前缀的样式时

CSS/HTML

CSS中3种常见页面布局：双飞翼布局、粘连布局、左右两列布局

相关文章

热门TAG

最新文章

热门文章